<template>
  <div>
    <!-- Sidebar -->
    <div class="sidebar">
      <div style="padding: 24px 20px; border-bottom: 1px solid #e5e7eb;">
        <div style="display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; border-radius: 10px; overflow: hidden;">
              <img src="../../../头像.jpg" alt="头像" style="width: 100%; height: 100%; object-fit: cover;" />
            </div>
            <span style="font-weight: 600; color: #111827;">快递代拿管理系统</span>
          </div>
      </div>

      <div style="padding: 16px 0;">
        <div class="nav-section">主菜单</div>
        <button :class="['nav-item', $route.path === '/admin/dashboard' ? 'active' : '']" @click="$router.push('/admin/dashboard')"><i class="fas fa-chart-line"></i><span>数据总览</span></button>
        <button :class="['nav-item', $route.path === '/admin/orders' ? 'active' : '']" @click="$router.push('/admin/orders')"><i class="fas fa-box"></i><span>订单管理</span></button>
        <button :class="['nav-item', $route.path === '/admin/users' ? 'active' : '']" @click="$router.push('/admin/users')"><i class="fas fa-users"></i><span>下单者管理</span></button>
        <button :class="['nav-item', $route.path === '/admin/couriers' ? 'active' : '']" @click="$router.push('/admin/couriers')"><i class="fas fa-motorcycle"></i><span>代拿者管理</span></button>
        <button :class="['nav-item', $route.path === '/admin/finance' ? 'active' : '']" @click="$router.push('/admin/finance')"><i class="fas fa-wallet"></i><span>财务管理</span></button>

        <div class="nav-section">运营管理</div>
        <button :class="['nav-item', $route.path === '/admin/announcements' ? 'active' : '']" @click="$router.push('/admin/announcements')"><i class="fas fa-bullhorn"></i><span>公告管理</span></button>
        <button :class="['nav-item', $route.path === '/admin/pricing' ? 'active' : '']" @click="$router.push('/admin/pricing')"><i class="fas fa-percentage"></i><span>盈利规则</span></button>

        <div class="nav-section">系统设置</div>
        <button :class="['nav-item', $route.path === '/admin/permissions' ? 'active' : '']" @click="$router.push('/admin/permissions')"><i class="fas fa-shield-alt"></i><span>权限管理</span></button>
        <button :class="['nav-item', $route.path === '/admin/logs' ? 'active' : '']" @click="$router.push('/admin/logs')"><i class="fas fa-file-alt"></i><span>系统日志</span></button>
        <button :class="['nav-item', $route.path === '/admin/settings' ? 'active' : '']" @click="$router.push('/admin/settings')"><i class="fas fa-cog"></i><span>系统设置</span></button>
      </div>

      <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; border-top: 1px solid #e5e7eb;">
        <div style="display: flex; align-items: center;">
          <div style="width: 40px; height: 40px; border-radius: 50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; color:#6b7280; font-weight:600;">管</div>
          <div style="margin-left: 12px; flex: 1;">
            <div style="font-weight: 500; color: #111827; font-size: 14px;">管理员</div>
            <div style="font-size: 12px; color: #9ca3af;">超级管理员</div>
          </div>
        </div>
        <button class="nav-item" @click="confirmLogout" style="margin-top:12px;"><i class="fas fa-sign-out-alt"></i><span>退出登录</span></button>
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Header -->
      <header class="header">
        <div></div>
        <div style="position: relative;">
          <input type="text" placeholder="搜索设置..." style="padding: 8px 16px 8px 36px; border: 1px solid #e5e7eb; border-radius: 8px; width: 260px;">
          <i class="fas fa-search" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af;"></i>
        </div>
      </header>

      <div class="content">
        <!-- 平台信息 -->
        <div class="card">
          <div class="card-head">
            <div>
              <h2>平台信息</h2>
              <p>配置平台基本信息和联系方式</p>
            </div>
            <button @click="savePlatformInfo" class="btn-primary">保存修改</button>
          </div>
          <div class="grid-2">
            <div><label>平台名称</label><input type="text" v-model="settings.platform_name"></div>
            <div><label>平台版本</label><input type="text" v-model="settings.platform_version"></div>
            <div><label>客服电话</label><input type="text" v-model="settings.service_phone"></div>
            <div><label>客服邮箱</label><input type="email" v-model="settings.service_email"></div>
            <div class="col-2"><label>平台简介</label><textarea rows="3" v-model="settings.platform_intro"></textarea></div>
          </div>
        </div>

        <!-- 业务配置 -->
        <div class="card">
          <div class="card-head">
            <div>
              <h2>业务配置</h2>
              <p>设置订单和服务相关参数</p>
            </div>
            <button @click="saveBusinessConfig" class="btn-primary">保存修改</button>
          </div>
          <div class="grid-2">
            <div><label>基础配送费（元）</label><input type="number" v-model.number="settings.base_delivery_fee" step="0.01"></div>
            <div><label>超时取消时间（分钟）</label><input type="number" v-model.number="settings.timeout_cancel_minutes"></div>
            <div><label>代拿者接单半径（公里）</label><input type="number" v-model.number="settings.courier_pickup_radius" step="0.1"></div>
            <div><label>订单保留天数</label><input type="number" v-model.number="settings.order_retention_days"></div>
            <div><label>平台抽成比例（%）</label><input type="number" v-model.number="settings.platform_commission_rate" step="0.1"></div>
            <div><label>最大配送距离（公里）</label><input type="number" v-model.number="settings.max_delivery_distance" step="0.1"></div>
          </div>
        </div>

        <!-- 功能开关 -->
        <div class="card">
          <div class="card-title">
            <h2>功能开关</h2>
            <p>控制系统功能的启用和禁用</p>
          </div>
          <div class="switch-list">
            <div class="switch-row"><div><div class="row-title">用户注册</div><div class="row-desc">允许新用户注册账号</div></div><label class="toggle"><input type="checkbox" v-model="settings.user_registration_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">代拿者申请</div><div class="row-desc">允许用户申请成为代拿者</div></div><label class="toggle"><input type="checkbox" v-model="settings.courier_application_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">在线支付</div><div class="row-desc">启用在线支付功能</div></div><label class="toggle"><input type="checkbox" v-model="settings.online_payment_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">实时定位</div><div class="row-desc">显示代拿者实时位置</div></div><label class="toggle"><input type="checkbox" v-model="settings.real_time_location_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">订单评价</div><div class="row-desc">允许用户对订单进行评价</div></div><label class="toggle"><input type="checkbox" v-model="settings.order_rating_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">优惠券系统</div><div class="row-desc">启用优惠券和促销功能</div></div><label class="toggle"><input type="checkbox" v-model="settings.coupon_system_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">维护模式</div><div class="row-desc">开启后用户无法下单</div></div><label class="toggle"><input type="checkbox" v-model="settings.maintenance_mode"><span></span></label></div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div class="card">
          <div class="card-head">
            <div>
              <h2>通知设置</h2>
              <p>配置系统通知和消息推送</p>
            </div>
            <button @click="saveNotificationSettings" class="btn-primary">保存修改</button>
          </div>
          <div class="switch-list">
            <div class="switch-row"><div><div class="row-title">短信通知</div><div class="row-desc">订单状态变更时发送短信</div></div><label class="toggle"><input type="checkbox" v-model="settings.sms_notification_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">邮件通知</div><div class="row-desc">重要事件发送邮件提醒</div></div><label class="toggle"><input type="checkbox" v-model="settings.email_notification_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">APP推送</div><div class="row-desc">向移动端推送消息通知</div></div><label class="toggle"><input type="checkbox" v-model="settings.app_push_enabled"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">微信通知</div><div class="row-desc">通过微信服务号发送通知</div></div><label class="toggle"><input type="checkbox" v-model="settings.wechat_notification_enabled"><span></span></label></div>
          </div>
        </div>

        <!-- 安全设置 -->
        <div class="card">
          <div class="card-head">
            <div>
              <h2>安全设置</h2>
              <p>配置系统安全和访问控制</p>
            </div>
            <button @click="saveSecuritySettings" class="btn-primary">保存修改</button>
          </div>
          <div class="grid-2">
            <div><label>密码最小长度</label><input type="number" v-model.number="settings.password_min_length"></div>
            <div><label>登录失败锁定次数</label><input type="number" v-model.number="settings.login_failure_lock_count"></div>
            <div><label>会话超时时间（分钟）</label><input type="number" v-model.number="settings.session_timeout_minutes"></div>
            <div><label>验证码有效期（分钟）</label><input type="number" v-model.number="settings.verification_code_validity_minutes"></div>
          </div>
          <div class="switch-list">
            <div class="switch-row"><div><div class="row-title">强制HTTPS</div><div class="row-desc">所有请求必须使用HTTPS协议</div></div><label class="toggle"><input type="checkbox" v-model="settings.force_https"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">双因素认证</div><div class="row-desc">管理员登录需要二次验证</div></div><label class="toggle"><input type="checkbox" v-model="settings.two_factor_auth"><span></span></label></div>
            <div class="switch-row"><div><div class="row-title">IP白名单</div><div class="row-desc">限制管理后台访问IP</div></div><label class="toggle"><input type="checkbox" v-model="settings.ip_whitelist_enabled"><span></span></label></div>
          </div>
        </div>

        <!-- 备份与维护 -->
        <div class="card">
          <div class="card-title">
            <h2>备份与维护</h2>
            <p>数据备份和系统维护设置</p>
          </div>
          <div class="grid-2">
            <div>
              <label>自动备份频率</label>
              <select v-model="backupFrequency">
                <option value="daily">每天</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </div>
            <div>
              <label>备份保留天数</label>
              <input type="number" v-model.number="backupRetentionDays">
            </div>
          </div>
          <div class="btn-row">
            <button @click="backupNow" class="btn-green">立即备份</button>
            <button @click="restoreBackup" class="btn-gray">恢复备份</button>
            <button @click="clearCache" class="btn-orange">清理缓存</button>
          </div>
        </div>

        <!-- 系统信息 -->
        <div class="card">
          <div class="card-title">
            <h2>系统信息</h2>
            <p>查看系统运行状态和环境信息</p>
          </div>
          <div class="grid-3">
            <div class="info-box"><div class="info-label">系统版本</div><div class="info-value">v2.1.0</div></div>
            <div class="info-box"><div class="info-label">数据库版本</div><div class="info-value">MySQL 8.0</div></div>
            <div class="info-box"><div class="info-label">服务器环境</div><div class="info-value">Linux</div></div>
            <div class="info-box"><div class="info-label">运行时间</div><div class="info-value">45天</div></div>
            <div class="info-box"><div class="info-label">CPU使用率</div><div class="info-value">23%</div></div>
            <div class="info-box"><div class="info-label">内存使用率</div><div class="info-value">56%</div></div>
            <div class="info-box"><div class="info-label">磁盘使用率</div><div class="info-value">42%</div></div>
            <div class="info-box"><div class="info-label">最后备份时间</div><div class="info-value">2小时前</div></div>
            <div class="info-box"><div class="info-label">系统状态</div><div class="info-value" style="color:#059669;">正常运行</div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'AdminSettings',
  data() {
    return {
      settings: {
        platform_name: '快递代拿管理系统',
        platform_version: 'v2.1.0',
        service_phone: '400-888-8888',
        service_email: 'support@express.com',
        platform_intro: '专业的快递代拿服务平台，为用户提供便捷、安全的快递代收代取服务。',
        base_delivery_fee: 3.00,
        timeout_cancel_minutes: 30,
        courier_pickup_radius: 5.0,
        order_retention_days: 90,
        platform_commission_rate: 10.0,
        max_delivery_distance: 10.0,
        user_registration_enabled: true,
        courier_application_enabled: true,
        online_payment_enabled: true,
        real_time_location_enabled: true,
        order_rating_enabled: true,
        coupon_system_enabled: false,
        maintenance_mode: false,
        sms_notification_enabled: true,
        email_notification_enabled: true,
        app_push_enabled: true,
        wechat_notification_enabled: true,
        password_min_length: 8,
        login_failure_lock_count: 5,
        session_timeout_minutes: 120,
        verification_code_validity_minutes: 5,
        force_https: true,
        two_factor_auth: true,
        ip_whitelist_enabled: false
      },
      backupFrequency: 'daily',
      backupRetentionDays: 30
    }
  },
  methods: {
    confirmLogout() {
      if (confirm('是否确认退出？')) {
        localStorage.removeItem('adminToken')
        localStorage.removeItem('adminInfo')
        localStorage.removeItem('userToken')
        this.$router.push('/login')
      }
    },
    async loadSettings() {
      try {
        const { data } = await axios.get('/api/admin/settings')
        if (data && data.success) {
          this.settings = { ...this.settings, ...data.data }
        }
      } catch (e) {
        console.error('加载系统设置失败', e)
      }
    },
    async savePlatformInfo() {
      try {
        const { data } = await axios.put('/api/admin/settings', {
          platform_name: this.settings.platform_name,
          platform_version: this.settings.platform_version,
          service_phone: this.settings.service_phone,
          service_email: this.settings.service_email,
          platform_intro: this.settings.platform_intro
        })
        if (data && data.success) {
          ElMessage.success('平台信息保存成功')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      }
    },
    async saveBusinessConfig() {
      try {
        const { data } = await axios.put('/api/admin/settings', {
          base_delivery_fee: this.settings.base_delivery_fee,
          timeout_cancel_minutes: this.settings.timeout_cancel_minutes,
          courier_pickup_radius: this.settings.courier_pickup_radius,
          order_retention_days: this.settings.order_retention_days,
          platform_commission_rate: this.settings.platform_commission_rate,
          max_delivery_distance: this.settings.max_delivery_distance
        })
        if (data && data.success) {
          ElMessage.success('业务配置保存成功')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      }
    },
    async saveNotificationSettings() {
      try {
        const { data } = await axios.put('/api/admin/settings', {
          sms_notification_enabled: this.settings.sms_notification_enabled,
          email_notification_enabled: this.settings.email_notification_enabled,
          app_push_enabled: this.settings.app_push_enabled,
          wechat_notification_enabled: this.settings.wechat_notification_enabled
        })
        if (data && data.success) {
          ElMessage.success('通知设置保存成功')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      }
    },
    async saveSecuritySettings() {
      try {
        const { data } = await axios.put('/api/admin/settings', {
          password_min_length: this.settings.password_min_length,
          login_failure_lock_count: this.settings.login_failure_lock_count,
          session_timeout_minutes: this.settings.session_timeout_minutes,
          verification_code_validity_minutes: this.settings.verification_code_validity_minutes,
          force_https: this.settings.force_https,
          two_factor_auth: this.settings.two_factor_auth,
          ip_whitelist_enabled: this.settings.ip_whitelist_enabled
        })
        if (data && data.success) {
          ElMessage.success('安全设置保存成功')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      }
    },
    async backupNow() {
      try {
        ElMessage.info('正在备份...')
        // 这里可以调用备份API
        setTimeout(() => ElMessage.success('备份完成'), 2000)
      } catch (e) {
        ElMessage.error('备份失败')
      }
    },
    async restoreBackup() {
      try {
        await ElMessageBox.confirm('确定要恢复备份吗？这将覆盖当前数据', '确认恢复', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        ElMessage.success('恢复备份功能待实现')
      } catch (e) {
        if (e !== 'cancel') ElMessage.error('操作失败')
      }
    },
    async clearCache() {
      try {
        await ElMessageBox.confirm('确定要清理缓存吗？', '确认清理', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        ElMessage.success('缓存清理完成')
      } catch (e) {
        if (e !== 'cancel') ElMessage.error('操作失败')
      }
    }
  },
  mounted() {
    this.loadSettings()
  }
}
</script>

<style scoped>
.logo { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background: #fff; border-right: 1px solid #e5e7eb; overflow-y: auto; }
.main-content { margin-left: 240px; min-height: 100vh; }
.nav-item { display:flex; align-items:center; padding:12px 20px; color:#6b7280; transition: all .2s; cursor:pointer; width:100%; background:transparent; border:0; text-align:left; }
.nav-item:hover { background:#f3f4f6; color:#3b82f6; }
.nav-item.active { background:#eff6ff; color:#3b82f6; font-weight:500; }
.nav-item i { width:20px; margin-right:12px; }
.nav-section { padding:16px 20px 8px; font-size:12px; color:#9ca3af; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.header { background:#fff; border-bottom:1px solid #e5e7eb; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; }
.breadcrumb { display:flex; align-items:center; gap:8px; color:#6b7280; }
.breadcrumb .current { color:#111827; }
.actions { display:flex; gap:16px; }
.icon-btn { padding:8px; border:none; background:transparent; cursor:pointer; position:relative; }
.icon-btn .dot { position:absolute; top:4px; right:4px; width:8px; height:8px; background:#ef4444; border-radius:50%; }
.content { padding:32px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px; margin-bottom:24px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { margin-bottom:16px; }
.card h2 { font-size:18px; font-weight:600; color:#111827; }
.card p { color:#6b7280; font-size:14px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.col-2 { grid-column: span 2; }
label { display:block; margin-bottom:8px; font-size:14px; color:#374151; font-weight:500; }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; }
.btn-primary { padding:8px 16px; background:#3b82f6; color:#fff; border:none; border-radius:8px; cursor:pointer; }
.switch-list { display:flex; flex-direction: column; gap:12px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #f3f4f6; }
.row-title { font-weight:600; color:#111827; }
.row-desc { font-size:13px; color:#6b7280; }
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle span { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#cbd5e1; transition:.3s; border-radius:24px; }
.toggle span:before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:#fff; transition:.3s; border-radius:50%; }
.toggle input:checked + span { background:#3b82f6; }
.toggle input:checked + span:before { transform: translateX(20px); }
.btn-row { display:flex; gap:12px; }
.btn-green { padding:8px 16px; background:#16a34a; color:#fff; border:none; border-radius:8px; }
.btn-gray { padding:8px 16px; background:#4b5563; color:#fff; border:none; border-radius:8px; }
.btn-orange { padding:8px 16px; background:#ea580c; color:#fff; border:none; border-radius:8px; }
.info-box { padding:16px; background:#f9fafb; border-radius:8px; }
.info-label { font-size:13px; color:#6b7280; margin-bottom:6px; }
.info-value { font-size:16px; font-weight:600; color:#111827; }
</style>

